<template>
	<view class="bottomContent">
		<view class="bottom_nav_wrap" >
		        <view  v-for="(item,index) in Attbottoms" :key="index" >		      
		            <view @click="bottomSkip(item)">    
		                <view class="bottom_nav_content" >
		                    <view class="bottom-nav-text " :class="[{'select-color':(bottomNavName==item.name)},item.icon,]"></view>
		                    <text class="bottom_nav_font_cancel" :class="[{'select-color':(bottomNavName==item.name)}]">{{item.text}}</text>
		                </view>     
		            </view>  
		        </view>
		</view>
	</view>
</template>
<script>
	export default {
		name:"bottomCom",
		// props:['topName','userName','bottomArr','bottomName','classId'],
		props:{
			bottomArr:Array,
			topName:String,
			userName:String,			
			bottomName:String,
			classId:String,  
			isDuty:String,
		},
		data(){
			return{
				index:1,
				bottomsData:[],
				Attbottoms:[ {
                    name:'home',
                    icon:'iconfont icon-yonghutongji',
                    text:"考勤",
                    path: '/pages/index/index'
                },
				{
				    name:'atttendance',
				    icon:'iconfont icon-bi',
				    text:"统计",
				    path: '/pages/index/index'
				},
				{
				    name:'maintenance',
				    icon:'iconfont icon-shezhi',
				    text:"设置",
				    path: '/pages/index/index'
				},
				],
				bottomNavName:'home',			
				MagBottoms:[{
                    name:'home',
                    icon:'iconfont icon-yonghutongji',
                    text:"考勤",
                    path: '/pages/index/index'
                },
				{
				    name:'home',
				    icon:'iconfont icon-yonghutongji',
				    text:"考勤",
				    path: '/pages/index/index'
				},
				{
				    name:'home',
				    icon:'iconfont icon-yonghutongji',
				    text:"考勤",
				    path: '/pages/index/index'
				},]
				
				}
				
			
		},		
		mounted() {
			 if(this.bottomArr&&this.bottomArr.length>0){
				 this.Attbottoms = this.bottomArr			 
			 }	 
			 if(this.bottomName){
				 this.bottomNavName = this.bottomName
			 }
			console.log(this.$attrs,"bottom")
		},
		
		methods:{
			bottomSkip(item){							
				this.bottomNavName = item.name		
				if(item.name=='moring'||item.name=='moon'||item.name=='night'){
					if(this.isDuty){
						uni.navigateTo({
							url:`${item.path}?classId=${this.classId}&className=${this.topName}&type=duty`,	
							success: res => {},
							fail: () => {},
							complete: () => {}
						})
					}else{
						uni.navigateTo({
							url:`${item.path}?classId=${this.classId}&className=${this.topName}`,	
							success: res => {},
							fail: () => {},
							complete: () => {}
						})
					}
					
				}else{
					uni.navigateTo({
						url:`${item.path}`,	
						success: res => {},
						fail: () => {},
						complete: () => {}
					})
				}
							
			}
		}
	}
</script>

<style>
	@font-face {
	  font-family: 'iconfont';  /* project id 3303366 */
	  src: url('');
	  src: url('?#iefix') format('embedded-opentype'),
	  url('https://at.alicdn.com/t/font_3303366_3ied7mxip0t.woff2') format('woff2'),
	  url('https://at.alicdn.com/t/font_3303366_3ied7mxip0t.woff') format('woff'),
	  url('https://at.alicdn.com/t/font_3303366_3ied7mxip0t.ttf') format('truetype'),
	  url('#iconfont') format('svg');
	}
	.bottomContent{
		position: fixed;
		bottom: 0rpx;
		left:0rpx;
		box-shadow: 10rpx 0rpx 10rpx 0rpx #8F8F94;
		width:100%;
		height: 0rpx;
		background-color: white;
		z-index:99999
	}
	 .bottom_nav_wrap{
	        width:750rpx;
	        height:80rpx;
	        background:rgba(255,255,255,1);
	        box-shadow:0px -1rpx 10rpx 0rpx rgba(104,57,182,0.2);
	        display: flex;
	        justify-content: space-around;
	        align-content: space-between;
	        position:fixed;
	        bottom:0;
	        left:0;
	        padding-top:18rpx;       
	        padding-bottom: 20rpx;
	    }
	    .bottom_nav_content{
	        display: flex;
	        flex-direction: column;
			align-items:center ;
	
	    }
	    .select-color {
	        color:blue!important;
	    }
	    .bottom-nav-text{
	        font-size: 32rpx;
	        color:rgba(161,161,161,1);
	    }
	    .bottom_nav_font{
	        font-size:32rpx;
	        font-family:Source Han Serif SC;
	        font-weight:bold;
	        color:blue;
	        line-height:24rpx;
	        margin-top:20rpx;
	        /* margin-left:-3rpx; */
	    }
	    .bottom_nav_font_cancel{
	        font-size:32rpx;
	        font-family:Source Han Serif SC;
	        font-weight:bold;
	        color:rgba(161,161,161,1);
	        line-height:24rpx;
	        margin-top:20rpx;
	        /* margin-left:-3rpx; */
	    }
</style>
